<style>
.layui-form-pane .layui-form-label{width:auto;}
.layui-form-item{margin-bottom: 0px;}
.order-time-bg{background-color:#1E9FFF;color:white;padding:0px 5px;}
</style>
<div class="fixed-bar">
<form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="hisi-table-search">
<div class="layui-form-item">
	<div class="layui-inline">
	 	<label class="layui-form-label">订单号</label>
	     <div class="layui-input-inline">
	         <input type="text" name="client_ordernum" lay-verify="" placeholder="输入订单号" class="layui-input">
	     </div>
	 </div>
	{if env('env_site') == 'riwei' }
	<div class="layui-inline">
		<label class="layui-form-label">客户单号</label>
		<div class="layui-input-inline">
			<input type="text" name="ext_id" lay-verify="" placeholder="输入客户单号" class="layui-input">
		</div>
	</div>
	{/if}
	<div class="layui-inline">
		<label class="layui-form-label">材料名称</label>
	    <div class="layui-input-inline">
	        <input type="text" name="material_name" lay-verify="" placeholder="输入材料名称" class="layui-input">
	    </div>
	</div>
 
	<div class="layui-inline">
		<label class="layui-form-label">物料SKU</label>
	    <div class="layui-input-inline">
	        <input type="text" name="material_sku" lay-verify="" placeholder="输入材料SKU" class="layui-input">
	    </div>
	</div>
 
	<div class="layui-inline">
		<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
	</div>
</div>
</form>
</div>

<table id="dataTable"></table>

{include file="system@block/layui" /}

<script type="text/html" title="模板" id="statusTpl">
	<div class="status-{{ d.id }}">
	{{# if(d.status == 1){ }}
    	<a href="{:url('status', ['val' => 3])}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-primary layui-btn-radius hisi-ajax" data-id={{ d.id }} data-client_ordernum={{ d.client_ordernum }} data-material_sku={{ d.mInfo.material_sku }} refresh="false" callback="callbackUpdateStatus">待处理</a>
	{{# }else if(d.status == 2){ }}
		<a href="{:url('status', ['val' => 3])}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-danger layui-btn-radius hisi-ajax" data-id={{ d.id }} data-client_ordernum={{ d.client_ordernum }} data-material_sku={{ d.mInfo.material_sku }} refresh="false" callback="callbackUpdateStatus">催料</a>
	{{# }else if(d.status == 3){ }}
		<a href="{:url('stock/add')}?material_sku={{ d.mInfo.material_sku }}&client_ordernum={{ d.client_ordernum }}&feed_id={{ d.id }}_t=4" hisi-data="{width: '500px', height: '500px'}" title="辅料入库" class="layui-btn layui-btn-xs layui-btn-radius hisi-iframe layui-btn-warm">来料入库</a>
	{{# }else if(d.status == 4){ }}
		<span class="green">补料完成</span>
	{{# } }}
	</div>
</script>
<script type="text/html" id="createTimeTpl">
    <div>{{layui.util.toDateString(d.create_time * 1000) }}</div>
</script>
<script type="text/html" id="updateTimeTpl">
    <div>{{layui.util.toDateString(d.update_time * 1000) }}</div>
</script>

<script type="text/javascript">
    layui.use(['table', 'tool'], function() {
        var $ = layui.jquery;
        var table = layui.table;
        table.render({
            elem: '#dataTable'
            ,url: '{:url()}' //数据接口
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,limit: 20
            ,limits: [20,50,100,150,200]
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar: true
            ,cellMinWidth: 80
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,cols: [[ //表头
                {field: 'id', title: '编号'}
                ,{field: 'client_ordernum', title: '订单号',templet:function(d){return '<span class="copy-item">'+d.client_ordernum+'</span>'},width:100}
                ,{field: 'name', title: '物料名称',templet:function(d){return '<span class="copy-item">'+d.mInfo.name+'</span>'},width:180}
                ,{field: 'material_sku', title: '物料SKU',templet:function(d){return '<span class="copy-item">'+d.mInfo.material_sku+'</span>'},width:180}
                ,{field: 'supplier', title: '供应商',templet:function(d){return d.mInfo.supplier}}
                ,{field: 'model', title: '型号',templet:function(d){return d.mInfo.model}}
                ,{field: 'colornum', title: '色号',templet:function(d){return d.mInfo.colornum}}
                ,{field: 'color', title: '颜色',templet:function(d){return d.mInfo.color}}
                ,{field: 'need_feed_count', title: '补料量'}
                ,{field: 'status', title: '状态',templet: '#statusTpl',width:100}
                ,{field: 'create_time', title: '创建时间',templet: '#createTimeTpl',width:150}
                ,{field: 'update_time', title: '更新时间',templet: '#updateTimeTpl',width:150}
            ]]
        });
        
        // 状态修改的回调
        window.callbackUpdateStatus = function(obj, res) {
        	if (res.code == 1) {
        		var id = obj.attr('data-id');
        		var materialSku = obj.attr('data-material_sku');
        		var clientOrdernum = obj.attr('data-client_ordernum');
        		var btn = "<a href=\"{:url('stock/add')}?material_sku="+materialSku+"&client_ordernum="+clientOrdernum+"&feed_id="+id+"\" hisi-data=\"{width: '500px', height: '500px'}\" title=\"辅料入库\" class=\"layui-btn layui-btn-xs layui-btn-radius hisi-iframe layui-btn-warm\">来料入库</a>";
        		$('.status-'+id).html(btn);
        	}
        }
        
        // 辅料入库的回调
        window.updateDistributingFeedStatus = function(feedId) {
        	$('.status-'+feedId).html('<span class="green">补料完成</span>');
        }
    });
</script>